import React, { Component } from 'react'
import Ctx from './store/Ctx'
import { Cell, Checkbox, Typography, SubmitBar, Tabs, Stepper } from 'react-vant';

export default class Home extends Component {

    //从父组件中拿到数据
    static contextType = Ctx

    state = {
        setDate: 0,
    }

    //全选
    get all() {
        return this.context.list.every(item => {
            return item.sed
        })
    }

    //选中的合计
    get sedTotal() {
        return this.context.list.reduce((p, n) => {
            if (n.sed) {
                return p + n.price * n.num * 1 
            }
            return p
        }, 0)
    }




    render() {
        /*   console.log(this.context); */
        let { list, changeSed, changeAllSed, oneDel, allDel, delHui,changeNum } = this.context
        let { setDate, num } = this.state

        let newlist = list.filter((item) => {
            if (setDate == 0) {
                return !item.del
            }
            if (setDate == 1) {
                return !item.del && item.sed
            }
            if (setDate == 2) {
                return !item.del && !item.sed
            }
            if (setDate == 3) {
                return item.del
            }
        })

        return (
            <div>
                <div>
                    <Tabs border type='capsule' onChange={(c) => {
                        this.setState({ setDate: c })

                    }}>
                        {['全部', '已完成', '未完成', '回收站'].map(item => (
                            <Tabs.TabPane key={item} title={item}>
                            </Tabs.TabPane>
                        ))}
                    </Tabs>
                </div>
                <div onClick={() => {
                    allDel()
                }}>删除选中的数据</div>
                {
                    newlist.map(item => {
                        return <Cell onClick={() => {
                            /*  this.props.history.push(`/xiangqing/${item.id}`) */
                        }}
                            center
                            key={item.id}
                            title={item.title}
                            label={<Stepper
                            min={1}
                                value={item.num}
                                onChange={v => {
                               /*      console.log(v); */
                                    
                                    changeNum(item.id,v)
                                }}
                            />}
                            icon={<Checkbox checked={item.sed} onChange={() => { changeSed(item.id) }} />}
                            value={<>
                                <p onClick={() => {
                                    delHui(item.id)
                                }}>删除</p>
                                <Typography.Text>￥{item.price}</Typography.Text>
                            </>}
                        />
                    })
                }


                <div>
                    <SubmitBar
                        price={this.sedTotal * 100}
                        buttonText="提交订单"
                    >
                        <Checkbox checked={this.all} onChange={(e) => { changeAllSed(e) }}>全选</Checkbox>
                    </SubmitBar>
                </div>
            </div>
        )
    }
}
